<template>
  <div>
    <el-card>
      <p>物料采购成本支出报表</p>
      <div class="searchArea">
        <!-- <el-form ref="searchForm"
                 :inline="true"
                 :model="searchForm"
                 label-position="left"> -->
        <el-form :inline="true"
                 label-position="left">
          <el-form-item label="筛选类别：">
            <el-select v-model="value"
                       placeholder="请选择">
              <el-option v-for="item in AllSlist"
                         :label="item.menuName"
                         :value="item.id"
                         :key="item.id"
                         @click.native="getList(item.id)"></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item>
            <el-button
              type='primary'
              style="margin-left:30px"
              @click="dialogVisible=true"
            >填写申请</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <div class="tableBox">
        <el-table :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe
                  @selection-change="handleSelectionChange">
          <el-table-column prop="orderNum"
                           label="单号"
                           align="center"></el-table-column>
          <el-table-column prop="aksNum"
                           label="AKS料号"
                           align="center"></el-table-column>
          <el-table-column prop="productManuNum"
                           label="制造商料号"
                           align="center"></el-table-column>
          <el-table-column prop="meunId"
                           label="制造商"
                           align="center"></el-table-column>
          <el-table-column prop="memo"
                           label="物料描述"
                           align="center"></el-table-column>
          <el-table-column prop="unit"
                           label="单位(个)"
                           align="center"></el-table-column>
          <el-table-column prop="productAddress"
                           label="原产地"
                           align="center">中国</el-table-column>
          <el-table-column prop="stock"
                           label="购买数量(个)"
                           align="center"></el-table-column>
          <el-table-column prop="price"
                           label="购买单价(人民币/含税)"
                           align="center"></el-table-column>
          <el-table-column prop="tax"
                           label="税金(元)"
                           align="center"></el-table-column>
          <el-table-column prop="dealTime"
                           label="交货日期"
                           align="center"></el-table-column>
          <el-table-column prop="status"
                           width="100"
                           label="状态"
                           align="center">
            <template slot-scope="scope">
              <el-tag type="danger"
                      v-show="scope.row.status!=0">已处理</el-tag>
              <el-tag type="success"
                      v-show="scope.row.status==0">未处理</el-tag>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
    <el-dialog title="补料单申请"
               :visible.sync="dialogVisible"
               width="40%">
      <el-form ref="supplementForm"
               :model="supplementForm"
               label-position="right"
               label-width='170px'
               style="width:100%">
        <el-form-item label="AKS料号：">
          <el-input v-model="searchForm.aksNum"
                    placeholder="请输入AKS料号"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="制造商：">
          <el-input v-model="searchForm.meunName"
                    placeholder="请输入制造商"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="制造商料号：">
          <el-input v-model="searchForm.productManuNum"
                    placeholder="请输入制造商料号"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="物料描述：">
          <el-input v-model="searchForm.memo"
                    placeholder="请输入物料描述"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="单位：">
          <el-input v-model="searchForm.unit"
                    placeholder="请输入单位"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="购买数量：">
          <el-input v-model="searchForm.stock"
                    placeholder="请输入购买数量"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="购买单价(人民币/含税)：">
          <el-input v-model="searchForm.price"
                    placeholder="请输入购买单价"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="交货日期：">
          <el-input v-model="searchForm.dealTime"
                    placeholder="请输入交货日期"
                    style="width:65%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <div style="text-align:center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="dialogVisible = false">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  PRODUCT_MAKEUP_MY_LIST, PRODUCT_MAKEUP_APPLY, SUPPLIER_ALLLIST, PRODUCT_MAKEUP_LISTBYMENU
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
export default {
  data () {
    return {
      searchForm: {
        kinds: ""
      },
      supplementForm: {
        aksNum: "AKS13jj3124",
        productManuNum: "2335451",
        meunId: "BMW",
        meunName: "",
        memo: "sfds423g23g",
        productAddress: "",
        unit: "xxx",
        stock: "100",
        price: "10",
        dealTime: "2019/11/30",
      },

      tableData: [

      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      dialogVisible: false,
      AllSlist: [],
      value: ''
    };
  },
  created () {
    this.getAllList()
    this.getMakeUpList()
  },
  methods: {
    getList (val) {
      console.log(val)
      PRODUCT_MAKEUP_LISTBYMENU({
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        meunId: val
      }).then(res => {
        this.tableData = res.data.dataList
        this.total = res.data.count
        for (let i in this.tableData) {
          this.tableData[i].dealTime = this.formatSecond(this.tableData[i].dealTime)
        }
      })
    },
    getAllList () {
      SUPPLIER_ALLLIST().then(res => {
        this.AllSlist = res.data
        console.log(this.AllSlist)
      })
    },
    getMakeUpList () {
      PRODUCT_MAKEUP_MY_LIST({
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.dataList
        this.total = res.data.count
        for (let i in this.tableData) {
          this.tableData[i].dealTime = this.formatSecond(this.tableData[i].dealTime)
        }
      })

    },
    applyProduct () {
      PRODUCT_MAKEUP_APPLY({
        orderNum: "12312",
        aksNum: "AKS13jj3124",
        productManuNum: "2335451",
        meunId: "BMW",
        memo: "sfds423g23g",
        productAddress: "",
        unit: "xxx",
        stock: "100",
        price: "10",
        dealTime: "2019/11/30"
      }).then(res => {
        this.getMakeUpList()
      })

    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      if (this.value == '') {
        this.getMakeUpList()
      } else {
        this.getList(this.value)
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      if (this.value == '') {
        this.getMakeUpList()
      } else {
        this.getList(this.value)
      }
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>